<template>
  <div :class="sideNavCls">
    <t-menu
      width="232px"
      :class="menuCls"
      :theme="theme"
      :value="active"
      :collapsed="collapsed"
      :defaultExpanded="defaultExpanded"
    >
      <template #logo>
        <span
          v-if="showLogo"
          :class="`${prefix}-side-nav-logo-wrapper ah-logo-wrapper`"
          @click="() => handleNav('/dashboard/base')"
        >
          <!-- <component :is="getLogo" :class="`${prefix}-side-nav-logo-${collapsed ? 't' : 'tdesign'}-logo`" /> -->
					 <img src="@/assets/logo.png" alt="" width="32px" height="32px">
					 <span v-if="!collapsed">主动健康</span>
        </span>
      </template>
      <menu-content :navData="menu" />
      <!-- <template #operations>
        <span class="version-container"> {{ !collapsed ? `TDesign Starter ${pgk.version}` : pgk.version }} </span>
      </template> -->
    </t-menu>
    <div :class="`${prefix}-side-nav-placeholder${collapsed ? '-hidden' : ''}`"></div>
  </div>
</template>

<script>
import Vue from 'vue';
import { prefix } from '@/config/global';
const Logo = require('@/assets/assets-t-logo.svg');
const LogoFull = require('@/assets/assets-logo-full.svg');

import MenuContent from './MenuContent.vue';
import pgk from '../../../package.json';

const MIN_POINT = 992 - 1;

export default Vue.extend({
  name: 'sideNav',
  components: {
    MenuContent,
  },
  props: {
    menu: Array,
    showLogo: {
      type: Boolean,
      default: true,
    },
    isFixed: {
      type: Boolean,
      default: true,
    },
    layout: String,
    headerHeight: {
      type: String,
      default: '56px',
    },
    theme: {
      type: String,
      default: 'light',
    },
    isCompact: {
      type: Boolean,
      default: false,
    },
    maxLevel: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      prefix,
      pgk,
    };
  },
  computed: {
    defaultExpanded() {
      const path = this.active;
      const parentPath = path.substring(0, path.lastIndexOf('/'));
      if (parentPath.lastIndexOf('/')) {
        const threeLevel = parentPath.substring(0, parentPath.lastIndexOf('/'));
        return threeLevel === '' ? [] : [threeLevel, parentPath];
      }
      return parentPath === '' ? [] : [parentPath];
    },
    iconName() {
      return this.$store.state.setting.isSidebarCompact ? 'menu-fold' : 'menu-unfold';
    },
    collapsed() {
      return this.$store.state.setting.isSidebarCompact;
    },
    sideNavCls() {
      return [
        `${this.prefix}-sidebar-layout`,
        {
          [`${this.prefix}-sidebar-compact`]: this.isCompact,
        },
      ];
    },
    menuCls() {
      return [
        `${this.prefix}-side-nav`,
        {
          [`${this.prefix}-side-nav-no-logo`]: !this.showLogo,
          [`${this.prefix}-side-nav-no-fixed`]: !this.isFixed,
          [`${this.prefix}-side-nav-mix-fixed`]: this.layout === 'mix' && this.isFixed,
        },
      ];
    },
    layoutCls() {
      return [`${this.prefix}-side-nav-${this.layout}`, `${this.prefix}-sidebar-layout`];
    },
    active() {
      if (!this.$route.path) {
        return '';
      }
      return this.$route.path
        .split('/')
        .filter((_item, index) => index <= this.maxLevel && index > 0)
        .map((item) => `/${item}`)
        .join('');
    },
    getLogo() {
      if (this.collapsed) {
        return Logo;
      }
      return LogoFull;
    },
  },
  mounted() {
    this.autoCollapsed();

    window.onresize = () => {
      this.autoCollapsed();
    };
  },
  methods: {
    changeCollapsed() {
      this.$store.commit('setting/toggleSidebarCompact');
    },
    autoCollapsed() {
      const isCompact = window.innerWidth <= MIN_POINT;
      this.$store.commit('setting/showSidebarCompact', isCompact);
    },
    handleNav(url) {
      this.$router.push(url);
    },
  },
});
</script>

<style lang="less" scoped>
.ah-logo-wrapper {
	margin-left: 0 !important;

	span {
		font-size: 24px;
		font-weight: bold;
		font-style: italic;
		letter-spacing: 2px;
		margin-left: 8px;
		color: #333;
	}
}

.t-default-menu__inner .t-menu--scroll {
	height: calc(100vh - 56px);
	overflow-y: auto;
}
</style>
